<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <style>
        body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

.file-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.file-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    background-color: #f9f9f9;
}

.file-item:hover {
    background-color: #eee;
}

.file-name {
    font-weight: bold;
    margin-bottom: 5px;
}
/* ... 之前的样式保持不变 ... */

/* 添加针对不同文件类型的颜色编码 */
.file-type-PDF {
    color: #D34136; /* 红色代表PDF */
}
.file-type-JPEG {
    color: #228B22; /* 绿色代表JPEG图片 */
}
.file-type-PPTX {
    color: #FFA500; /* 橙色代表PPTX */
}
.file-type-ZIP {
    color: #057cbc; /* 橙色代表PPTX */
}
/* 更多类型可以继续添加 */

/* 鼠标悬停效果增强 */
.file-item:hover {
    background-color: #eaeaea;
    transform: scale(1.02); /* 稍微放大以示强调 */
    transition: all 0.2s ease-in-out; /* 平滑过渡 */
}

/* 文件大小显示为更明显的样式 */
.file-size {
    font-style: italic;
}
.download-link {
    margin-top: 5px;
}

.download {
    display: inline-block;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.download:hover {
    background-color: #45a049;
}
    </style>
</head>
<body>
    <header>
        <h1>文件列表</h1>
    </header>
    <main>
        <div class="file-list-container">
            <!-- 文件列表项将由JavaScript动态生成 -->
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    const fileListContainer = document.querySelector('.file-list-container');

    // 模拟文件列表数据
    const fileListData = [
        { id: 1, name: '仿宋GB2312字体和方正小标宋简体.zip', size: '4.0 MB', type: 'ZIP' },
        { id: 2, name: 'image.jpg', size: '1.5 MB', type: 'JPEG' },
        { id: 3, name: 'presentation.pptx', size: '3.2 MB', type: 'PPTX' },
        { id: 4, name: 'document.pdf', size: '2.1 MB', type: 'PDF' },
        // { id: 5, name: 'image.jpg', size: '1.5 MB', type: 'JPEG' },
        // { id: 6, name: 'presentation.pptx', size: '3.2 MB', type: 'PPTX' },
        // { id: 7, name: 'document.pdf', size: '2.1 MB', type: 'PDF' },
        // { id: 8, name: 'image.jpg', size: '1.5 MB', type: 'JPEG' },
        // { id: 9, name: 'presentation.pptx', size: '3.2 MB', type: 'PPTX' },
        // { id: 10, name: 'presentation.pptx', size: '3.2 MB', type: 'PPTX' },
        // { id: 11, name: 'document.pdf', size: '2.1 MB', type: 'PDF' },
        // { id: 12, name: 'image.jpg', size: '1.5 MB', type: 'JPEG' },
        // { id: 13, name: '仿宋GB2312字体和方正小标宋简体.zip', size: '4.0 MB', type: 'ZIP' },
        // 更多文件...
    ];

    // 假设你有一个方法可以获取文件的实际URL
    function getFileDownloadUrl(fileId) {
        return `https://cdn.fe80.cn/uploads/dunz/${fileId}`;
    }

    fileListData.forEach(file => {
        const fileItem = document.createElement('div');
        fileItem.className = `file-item ${'file-type-' + file.type.toUpperCase()}`;
        fileItem.innerHTML = `
            <div class="file-name">${file.name}</div>
            <div class="file-size">大小: ${file.size}</div>
            <div>类型: <span class="${'file-type-' + file.type.toUpperCase()}">${file.type}</span></div>
            <div class="download-link" dataid="${file.id}">
                <a href="${getFileDownloadUrl(file.name)}" class="download" data-file-url="${getFileDownloadUrl(file.id)}">下载</a>
            </div>
        `;
        fileListContainer.appendChild(fileItem);
    });
});
    </script>
</body>
</html>